<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <th:block th:include="include :: header('首页')"/>
    <script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini layout-boxed">
<div class="wrapper">
    <th:block th:include="include :: headbar"/>
    <th:block th:include="include :: sidebar"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>&nbsp;</h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
            </ol>
        </section>

        <section class="content">
            <div class="box box-solid">
                <div class="box-body">
                    至今收入总额: <span id="sum" class="label label-info"></span>&nbsp元
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp &nbsp至今ADAS收入总额: <span id="sum1"
                                                                                     class="label label-info"></span>&nbsp元
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp &nbsp至今车模收入总额: <span id="sum2"
                                                                                   class="label label-info"></span>&nbsp元
                </div>
            </div>

            <!--                <h2>至今消费总额</h2>-->

            <!--                <h2>至今车模型消费总额</h2>-->

            <!-- 总收入，车模型总收入，ADAS总收入下拉形式 -->
            <div class="box box-solid">
                <div class="box-body">
                    <div style="margin-bottom:10px;">
                        <select id="select" class="selectpicker">
                            <option value="1">ADAS</option>
                            <option value="2">MODEL</option>
                            <option value="3">总额</option>
                        </select>
                    </div>
                    <div id="main" style="width: 900px;height:400px;margin-top:10px;">
                    </div>
                </div>
            </div>

            <div class="box box-solid">
                <div class="box-body">
                    <div style="margin-bottom:10px;">
                        <select id="select1" class="selectpicker">
                            <option value="1">ADAS</option>
                            <option value="2">MODEL</option>
                        </select>
                    </div>
                    <div id="main1"
                         style="width: 900px;height:400px;margin-left:10px;margin-top:10px;"></div>
                    <!--                    <div id="main2" style="width: 500px;height:300px;margin-right:10px;float:right"></div>-->
                </div>
            </div>

            <div class="box box-solid">
                <div class="box-body">
                    <div style="margin-bottom:10px;">
                        <select id="select3" class="selectpicker">
                            <option value="1">ADAS</option>
                            <option value="2">MODEL</option>
                        </select>
                    </div>
                    <div id="main3"
                         style="width: 900px;height:300px;margin-left:10px;margin-top:10px;">
                    </div>
                    <div id="main2"
                         style="width: 900px;height:300px;margin-left:10px;margin-top:10px;">
                    </div>
                </div>
            </div>
        </section>
    </div>
    <th:block th:include="include :: copyright"/>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var xAxisData = [];
    var adas = 0;
    var model = 0;
    var sum = 0;
    var title = '销售额';
    var yAxisData = [];

    window.onload = function () {
        $('.selectpicker').selectpicker('MODEL');
    };

    function getlongToDate() {
        var now = new Date();
        return [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
    }

    for (var i = 0; i < 7; i++) {
        xAxisData.push(getlongToDate());
    }

    $(function () {
        $.post('/mall/order/consume').then(function (res) {
            adas = res.data.adas;
            model = res.data.model;
            sum = numAdd(adas, model);

            $("#sum1").html(adas);
            $("#sum2").html(model);
            $("#sum").html(sum);
        }).catch(function (err) {
            console.log(err);
        });
        _ajax(1);
        _ajaxPlus(1);
        _ajaxWeek(1);
        $("#select").attr('value', '3', function () {
            var val = $(this).val();
            _ajax(val);
        }).on('change', function () {
            var val = $(this).val();
            _ajax(val);
        });
        $("#select1").on('change', function () {
            var val = $(this).val();
            _ajaxPlus(val);
        });
        $("#select3").on('change', function () {
            var val = $(this).val();
            _ajaxWeek(val);
        });
        initData();
    });


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $(function () {

    });

    function getMonthWeek(a, b, c) {
        var date = new Date(a, b, c), w = date.getDay(), d = date.getDate();
        return Math.ceil(
            (d + 6 - w) / 7
        );
    }

    function _ajax(data) {
        $.get('/mall/order/select?id=' + data).then(function (res) {
            yAxisData = res.data;
            var day = new Date();
            var month = day.getMonth() + 1;
            lastCurDay = new Date(day.getFullYear(), month, 0);
            var count = getMonthWeek(lastCurDay.getFullYear(), lastCurDay.getMonth(), lastCurDay.getDate());
            if (count === 4) {
                xAxisData = ["第一周", "第二周", "第三周", "第四周"];
            }
            if (count === 5) {
                xAxisData = ["第一周", "第二周", "第三周", "第四周", "第五周"];
            }
            myChart.setOption({
                value: 1,
                title: {
                    text: title + month + "月数据"
                },
                tooltip: {},
                legend: {
                    data: ['销量额']
                },
                xAxis: {
                    data: xAxisData
                },
                yAxis: {
                    // type : 'value',
                    // scale : true,
                    // max : 200,
                    // min : 0,
                    // splitNumber : 5,
                    // boundaryGap : [ 0.2, 0.2 ]
                },
                series: [{
                    name: '销量额',
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,   // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                                [
                                    {offset: 1, color: '#83bff6'},
                                    {offset: 0, color: '#188df0'}
                                ]
                            )
                        }
                    },
                    data: yAxisData
                }]
            })
        }).catch(function (err) {
            console.log(err);
        });
    }

    // 指定图表的配置项和数据
    // var option = {
    //
    // };

    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);

    var myChart1 = echarts.init(document.getElementById('main1'));

    function _ajaxPlus(data) {
        $.get('/mall/order/increase?id=' + data).then(function (res) {
            yAxisData = res.data;
            var day = new Date();
            var month = day.getMonth() + 1;
            lastCurDay = new Date(day.getFullYear(), month, 0);
            var count = getMonthWeek(lastCurDay.getFullYear(), lastCurDay.getMonth(), lastCurDay.getDate());
            if (count === 4) {
                xAxisData = ["第一周", "第二周", "第三周", "第四周"];
            }
            if (count === 5) {
                xAxisData = ["第一周", "第二周", "第三周", "第四周", "第五周"];
            }
            myChart1.setOption({
                value: 1,
                title: {
                    text: title + month + "月增长量"
                },
                tooltip: {},
                legend: {
                    data: ['增长量']
                },
                xAxis: {
                    interval: 0,
                    rotate: -15,
                    data: xAxisData
                },
                yAxis: {},
                series: [{
                    name: '增长量',
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,   // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                                [
                                    {offset: 1, color: '#83bff6'},
                                    {offset: 0, color: '#188df0'}
                                ]
                            )
                        }
                    },
                    data: yAxisData
                }]
            })
        }).catch(function (err) {
            console.log(err);
        });
    }

    var myChart2 = echarts.init(document.getElementById('main2'));

    function initData() {
        var legendData = ['adas', 'model'];
        var seriesValue = [];
        var axisLabel = [];
        for (i = 0; i < 12; i++) {
            var month = i + 1 + '月';
            axisLabel.push(month);
        }
        $.get('/mall/order/sum').then(function (res) {
            var arrData = [];
            for (var k = 0; k < res.data.length; k++) {
                arrData.push(res.data[k]);
            }
            for (var i = 0; i < legendData.length; i++) {
                var seriesDataVal = null;
                seriesDataVal = {
                    barWidth: 10,
                    name: legendData[i],
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            barBorderRadius: [10, 10, 10, 10]
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'top'//显示数据位置 'top/right/left/insideLeft/insideRight/insideTop/insideBottom'
                        }
                    },
                    data: arrData[i]
                };
                seriesValue.push(seriesDataVal);
            }
            myChart2.setOption({
                title: {
                    text: "月车机总量"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: legendData
                },
                xAxis: [{
                    min: 0,
                    type: 'category',
                    data: axisLabel
                }],
                yAxis: [{
                    min: 0,
                    type: 'value',
                    splitArea: {show: false}
                }],
                label: {
                    normal: { //显示bar数据
                        show: true,
                        position: 'top'
                    }
                },
                series: seriesValue
            })
        }).catch(function (err) {
            console.log(err)
        });
    }


    var myChart4 = echarts.init(document.getElementById('main3'));

    function _ajaxWeek(data) {
        $.get('/mall/order/week?id=' + data).then(function (res) {
            var xData = [];
            var yData = [];
            yData = res.data;
            var day = new Date();
            var date;
            var lastDay;
            var month = day.getMonth() + 1;
            lastCurDay = new Date(day.getFullYear(), month, 0);
            var count = getMonthWeek(lastCurDay.getFullYear(), lastCurDay.getMonth(), lastCurDay.getDate());
            for (var i = 6; i >= 0; i--) {
                var today = day.getDate() - i;
                if (today < 1) {
                    if (getDays() === 31) {
                        lastDay = today + 31;
                        date = day.getMonth() + "/" + lastDay;
                    } else if (getDays() === 30) {
                        lastDay = today + 30;
                        date = day.getMonth() + "/" + lastDay;
                    } else if (getDays() === 28) {
                        lastDay = today + 28;
                        date = day.getMonth() + "/" + lastDay;
                    } else if (getDays() === 29) {
                        lastDay = today + 29;
                        date = day.getMonth() + "/" + lastDay;
                    }
                } else {
                    date = month + "/" + today;
                }
                xData.push(date);
            }
            myChart4.setOption({
                title: {
                    text: "天销售额"
                },
                tooltip: {},
                legend: {
                    data: ['销量额']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {},
                series: [{
                    name: '销量额',
                    type: 'bar',
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,   // 0,0,1,0表示从左向右    0,0,0,1表示从右向左
                                [
                                    {offset: 1, color: '#83bff6'},
                                    {offset: 0, color: '#188df0'}
                                ]
                            )
                        }
                    },
                    data: yData
                }]
            })
        }).catch(function (err) {
            console.log(err);
        });
    }

    function getDays() {
        //构造当前日期对象
        var date = new Date();
        //获取年份
        var year = date.getFullYear();
        //获取当前月份
        var mouth = date.getMonth();
        //定义当月的天数；
        var days;
        //当月份为二月时，根据闰年还是非闰年判断天数
        if (mouth === 2) {
            days = year % 4 === 0 ? 29 : 28;
        } else if (mouth === 1 || mouth === 3 || mouth === 5 || mouth === 7 || mouth === 8 || mouth === 10 || mouth === 12) {
            //月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
            days = 31;
        } else {
            //其他月份，天数为：30.
            days = 30;
        }
        return days;
    }

    function numAdd(num1, num2) {
        var baseNum, baseNum1, baseNum2;
        try {
            baseNum1 = num1.toString().split(".")[1].length;
        } catch (e) {
            baseNum1 = 0;
        }
        try {
            baseNum2 = num2.toString().split(".")[1].length;
        } catch (e) {
            baseNum2 = 0;
        }
        baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
        return (num1 * baseNum + num2 * baseNum) / baseNum;
    }

    $(function () {
    });
</script>
</body>
</html>
